<template>
  <div id="visual-screen">
    <div class="fix-top-header">
      <top-header title="机器查看" :showTime="false" />
    </div>
    <div class="d-flex w-100 px-2 title-size machine-view--wrap h-20">
      <div class="d-flex w-100 h-100">
        <div class="d-flex flex-1">
          <div class="d-flex w-100 h-100 flex-column align-items-center justify-content-between">
            <p class="text-custom-2">
              {{ $t("machineView.todayOEE") }}
            </p>
            <div class="d-flex w-100 justify-content-center oee_progress_dt">
              <circular-progress :target-value="random(0, 100)" :width="getScreenWidth / 13"
                :height="getScreenWidth / 13"></circular-progress>
            </div>
          </div>
        </div>

        <div class="d-flex flex-1">
          <div class="d-flex w-100 h-100 flex-column align-items-center justify-content-between">
            <p class="text-custom-2">
              {{ $t("machineView.toweekOEE") }}
            </p>
            <div class="d-flex w-100 justify-content-center oee_progress_dt">
              <circular-progress :target-value="random(0, 100)" :width="getScreenWidth / 13"
                :height="getScreenWidth / 13"></circular-progress>
            </div>
          </div>
        </div>

        <div class="flex-1" style="flex: none; width: 15%">
          <p class="text-custom-2" style="text-align: center">
            {{ $t("machineView.status") }}
          </p>
          <div class="flex-row h-80 align-items-center justify-content-center justify-content-center">
            <h1 class="text-white text-center" :style="{color:getStatusColor(statusArr[machinestatusDetail.status]),fontWeight:'bold'}">
              {{
                (statusArr[machinestatusDetail.status]) ||""
              }}
            </h1>
          </div>
        </div>

        <div class="flex-1">
          <p class="text-custom-2" style="text-align: center">
            {{ $t("machineView.stopReason") }}
          </p>
          <div class="d-flex h-80 align-items-center justify-content-center justify-content-between">
            <h1 class="text-white text-center">
              {{
                (machinestatusDetail.reason) ||""
              }}
            </h1>
          </div>
        </div>
      </div>

      <div class="w-25 m-2">
        <p class="text-custom-2" style="text-align: center">
          {{ $t("machineView.planno") }}
        </p>
        <div class="d-flex h-80 align-items-center justify-content-center title-size text-white">
          {{ selected }}
        </div>
      </div>
    </div>


    <div class="d-flex w-100 px-2 main_center align-items-center justify-content-center h-40">
      <div class="d-flex w-20 h-100 flex-column prod-info-left justify-content-center">
        <div class="d-flex w-100 h-50 p-2">
          <div class="d-flex w-100 h-100 p-2 flex-column">
            <p class="text-custom-2 title-size">
              {{ $t("machineView.currentStateprod") }}
            </p>
            <div class="d-flex prod-info">
              <div class="d-flex prod-attr">
                <span>{{ $t("machineView.material") }}</span>
                <span>{{ $t("machineView.workOrder") }}</span>
                <span>{{ $t("machineView.productnum") }}</span>
                <span>{{ $t("machineView.badnum") }}</span>
              </div>
              <div class="d-flex prod-value">
                <span>{{ productionInfo.job }}</span>
                <span>{{ productionInfo.lot }}</span>
                <span v-if="productionInfo.produced">{{ productionInfo.produced }}/{{
                  productionInfo.quantity
                }}</span>
                <span>{{ productionInfo.wasted }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex w-40 align-items-center justify-content-center h-40" style="margin-right: 4%">
        <img src="@/assets/img/img1.png" style="display: block;width: 100%;height:auto" v-if="selected=='三菱镭射钻孔机'"/>
        <img src="@/assets/img/img2.png" style="display: block;width: auto;height:20rem" v-if="selected=='x光钻靶机'" class="scale-inspecta"/>
        <img src="@/assets/img/img3.png" style="display: block;width: auto;height:20rem" v-if="selected=='DI曝光机'"/>
      </div>

      <div class="d-flex w-20 h-100 flex-column machine-data-review">
        <div class="d-flex w-100 h-50 p-2">
          <div class="d-flex w-100 h-100 flex-column">
            <p class="text-custom-2 title-size">
              {{ $t("machineView.toweekgs") }}
            </p>

            <div class="d-flex w-100 h-100 justify-content-center">
              <doughnutChart :height="getScreenWidth / 10" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex  machine_data-list justify-content-center">
      <div class="d-flex flex-column machine_data-item-list" :class="{'ainmation-paused':!show}" id="content" ref="machineTop" v-if="props.data"
        :style="'animation-duration:' + Object.keys(props.data).length * 1 + 's'">
        <machineDataView v-for="(item, index) in dataview" :key="index" :data="getmachineData(item.mapAttr)" :item="item" :index="index+1"></machineDataView>
      </div>
    </div>
    <bottomFooter></bottomFooter>
  </div>
</template>
  
<script setup lang='ts'>
const circularProgress = defineAsyncComponent(() => import("@/components/circularProgress/index.vue"));
const doughnutChart = defineAsyncComponent(() => import("@/components/doughnutChart/index.vue"));
const machineDataView = defineAsyncComponent(() => import("./machineDataviewing.vue"))
const topHeader = defineAsyncComponent(() => import("@/components/topHeader/index.vue"))
import bottomFooter from '@/components/bottomFooter/index.vue';
import prodmockData from '@/utils/addmap';
const props = defineProps({
  data: {
    type: Object,
    default: []
  },
  selected: {
    type: String,
    default: ''
  },
  show: {
    type: Boolean,
    default: false
  }
})

const getmachineData = (jsonName: string) => {
  const mockData: any = prodmockData
  var Data: any = {};
  jsonName = jsonName || 'Project';
  var new_machineData: any = props.data;
  for (var i in new_machineData) {
    for (var j in mockData[jsonName]) {
      if (i == j) {
        Data[mockData[jsonName][j]] = new_machineData[i]
      }
    }
  }
  return Data
}

interface machineDetail {
  reason: string;
  status: string;
}
interface prodInfo {
  job: string,
  lot: string,
  produced: number,
  quantity: number,
  wasted: number
}
interface dataviewType {
  name: string,
  color: string,
  mapAttr: string
}
const { proxy } = getCurrentInstance() as any
const statusArr:any = ref({
  "Running":"运行",
  "Stopped":"停止",
  "Idle": "闲置",
  "Off": "关机",
})

const machinestatusDetail = ref({} as machineDetail);

const machineType = ref([] as EmptyObjectType);

const productionInfo = ref({} as prodInfo);

const random = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
const dataview = ref([
  { name: '维护', color: '#0c86e9', mapAttr: 'Maintain' },
  { name: '工程', color: '#6495ED', mapAttr: 'Project' },
  { name: '计划', color: '#9932CC', mapAttr: 'Plan' },
  { name: '工艺', color: '#FFB6C1', mapAttr: 'Craft' },
  { name: '生产', color: '#32CD32', mapAttr: 'Production' },
  { name: '', color: '', mapAttr: 'CS' }
] as dataviewType[])

const getScreenWidth: any = computed(() => proxy.$common.getScreenWidth())
const getStatusColor = (status:any)=>{
  let color = "";
  switch (status) {
    case "闲置":
      color = "rgb(66, 134, 244)";
      break;
    case "关机":
      color = "#b90808";
      break;
    default:
      // 运行
      color = "rgb(109, 199, 148)";
      break;
  }
  if(status=='停止'){
    color = '#ee0'
  }
  return color;
}
onMounted(() => {
  productionInfo.value = { job: "", lot: "CJOB558:P01", produced: random(0, 280), quantity: 280, wasted: random(0, 20) }
  machineType.value = [{ machine: "GTW6-01" }, { machine: "GTW6-02" }, { machine: "GTW6-03" }, { machine: "GTW6-04" }]
  let status = ["Running","Stopped","Idle","Off"]
  machinestatusDetail.value = {status:status[random(0,3)],reason:''}
})
defineExpose({random})

</script>
  
<style lang='less' scoped>
#visual-screen {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

.title-size {
  font-size: 1.3rem;
}

//自动滚动50s完成滚动
@timeount: 100s;

.header-title {
  z-index: 11111;
  background: #000b12;
}


.text-custom-2 {
  // color: rgba(27, 146, 253, 1);
  color: #ffffff;
}

.bg-custom {
  background-color: transparent;
}

.main_center {
  position: relative;
  height: 40vh;
  color: #ffffff;
}

.main_center img {
  max-width: 100%;
  height: auto;
}
.scale-inspecta{
  transform: scale(1.05);
  transform-origin: bottom;
}

.main_center div span {
  margin-right: 10px;
}

.machine_data-list {
  // margin: 30px auto 0;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.machine_data-item-list {
  width: 80%;
  position: absolute;
  top: 0%;
  z-index: 10;
  // animation: scroll-top @timeount linear infinite;
  animation-name: scroll-top;
  animation-duration: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.animation-action {
  animation: scroll-top @timeount linear infinite;
}

.machine_data-item-list:hover {
  animation-play-state: paused;
}

.machine_data-item-list:hover+.progress>.progress-bars {
  animation-play-state: paused;
}
.ainmation-paused{

animation-play-state: paused;

}

/* 动画 */
@keyframes scroll-top {
  0% {
    transform: translateY(10%);
  }

  100% {
    // height: 100%;
    transform: translateY(-100%);
  }
}

.prod-info {
  font-size: 1.1rem;
  flex-direction: row;
}

.prod-info-left {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.prod-attr {
  flex-direction: column;
  font-size: 1.1rem;
}

.prod-value {
  flex-direction: column;
}

.prod-value span {
  flex: 1;
}

.change_bg {
  background-color: #ffe92b !important;
  color: #000000;
}

.title_text {
  letter-spacing: 6px;
  margin: 0 25px;
  color: #ffffff;
}

.select-machine {
  position: absolute;
  right: 2vw;
  color: #ffffff;
}

.choose_machine {
  max-width: 20vw;
  text-align: center;
}

.select {
  position: relative;
}

.form-control {
  width: auto;
  margin-left: 10px;
}

.machine-data-review {
  position: absolute;
  left: 5%;
  justify-content: center;
}

.oee-mean {
  position: absolute;
  position: absolute;
  left: 10%;
  flex-direction: column;
  justify-content: flex-end;
}

@media screen and (min-width: 1750px) {

  .main_center,
  .machine_data-list {
    top: -3%;
  }
}


.progress {
  position: fixed;
  z-index: 1;
  bottom: 1%;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 0;
}

.progress-bars {
  background: #3fe7c8;
  height: 6px;
  width: 0%;
  animation-name: progress_width;
  animation-duration: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-play-state: running;
}

@keyframes progress_width {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}
.fix-top-header{
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 10%;
  background: linear-gradient(to right,#0a1f22, #071618, #0a1f22);
}
.machine-view--wrap{
  margin-top: 6rem;
}
</style>